<template>
	<div class="LongHouseApply">

		<div class="LongHouseApply-onebox">
			<div class="ho-top">
				<div class="hot-left">
					<img class="hotl-img" :src="houseinfo.houseImg" />
				</div>
				<div class="hot-right">
					<div class="hotr-title">{{houseinfo.title}}</div>
					<p v-if="houseinfo.house_type==1">整租 </p>
					<p v-if="houseinfo.house_type==2">合租</p>
					<p>{{houseinfo.room}}室{{houseinfo.hall}}厅-{{houseinfo.acreage}}m²</p>
				</div>
			</div>

		</div>

		<div class="LongHouseApply-houseinfo">
			<div class="LongHouseApply-title">租客信息</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>姓</span> <span>名</span>
				</div>
				<div class="hhi-right">
					<span class="hhir-g">
						<input class="hhir-input" placeholder="请如实填写证件上的姓名" v-model="contact_name"/>
					</span>
					<span class="more"></span>
				</div>
			</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>联</span>　　<span>系</span><span>电</span>　　<span>话</span>
				</div>
				<div class="hhi-right">
					<span class="hhir-g">
						<input class="hhir-input" placeholder="请如实填写真实的联系方式" v-model="contact_phone"/>
					</span>
					<span class="more"></span>
				</div>
			</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>性</span> <span>别</span>
				</div>
				<div class="hhi-right" @click=" showsex= true">

					<span>{{sex}}</span>
					<span class="more"></span>
				</div>
			</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>职</span>　　<span>业</span>
				</div>
				<div class="hhi-right" @click="toShow2">
					<span v-for="dd2item,key in defaultData2">{{dd2item.value}}</span>
					<span class="more"></span>
				</div>
			</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>身</span>　　<span>份</span><span>证</span>　　<span>号</span>
				</div>
				<div class="hhi-right">

					<span class="hhir-g">
						<input class="hhir-input" placeholder="请正确填写身份证号码" v-model="id_card"/>
					</span>
					<span class="more"></span>
				</div>
			</div>
		</div>

		<div class="LongHouseApply-houseinfo">

			<div class="LongHouseApply-title">租约信息</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>支</span>　　<span>付</span><span>方</span>　　<span>式</span>
				</div>
				<div class="hhi-right" @click="showzf=true">

					<span>{{myItemszfstring}}</span>
					<span class="more"></span>
				</div>
			</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>入</span>　　<span>住</span><span>时</span>　　<span>间</span>
				</div>
				<div class="hhi-right">

					<span style="position: relative;display: block;width: 3rem;"><span class="datetimespan" :class="{datetimespanactive:opdate}">{{opdatestring}}</span>
					<yd-datetime @click.native="opdatetime" :class="{opdatetactive:opdate}" type="date" v-model="datetime4" slot="right" :callback="callbacktiem"></yd-datetime>
					</span>
					<span class="more"></span>
				</div>
			</div>
			<div class="hh-item">
				<div class="hhi-left">
					<span>入</span>　　<span>住</span><span>时</span>　　<span>长</span>
				</div>
				<div class="hhi-right" @click="toShow1">

					<span v-for="dd1item,key in defaultData1">{{dd1item.text}}</span>
					<span class="more"></span>
				</div>
			</div>
		</div>

		<div class="LongHouseApply-flexbtn">
			<div class="hf-left" style="text-align: center;color: #E25051;">
				取消
			</div>
			<div class="hf-right" @click="submintGetordernew">提交申请</div>
		</div>
		<yd-actionsheet :items="myItemssex" v-model="showsex" cancel="取消"></yd-actionsheet>
		<yd-actionsheet :items="myItemszf" v-model="showzf" cancel="取消"></yd-actionsheet>
		<vue-pickers :show="show" :class="{mypicker:show}" :columns="columns" :defaultData="defaultData" :selectData="pickData" @cancel="close" @confirm="confirmFn"></vue-pickers>

	</div>

</template>

<script>
	import vuePickers from 'vue-pickers'
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "LongHouseApply",
		components: {
			vuePickers
		},
		data() {
			return {
				contact_name: "",
				contact_phone: "",
				pay_type: 0,
				id_card: "",
				opdate: false,
				opdatestring: "请选择入住时间",
				datetime4: '2017-05-11',

				show: false,
				columns: 1,
				defaultData: [{
					text: "1年",
					value: "请选择入住时长"
				}],
				defaultData1: [{
					text: "请选择入住时长",
					value: "请选择入住时长"
				}],

				defaultData2: [{
					text: "请选择职业",
					value: "请选择职业"
				}],
				pickData: {},
				pickData1: {
					// 第一列的数据结构
					data1: [{
							text: "1年",
							value: "1"
						},
						{
							text: "2年",
							value: "2"
						},
						{
							text: "3年",
							value: "3"
						},
						{
							text: "4年",
							value: "4"
						},
						{
							text: "5年",
							value: "5"
						},
						{
							text: "6年",
							value: "6"
						},
						{
							text: "7年",
							value: "7"
						},
						{
							text: "8年",
							value: "8"
						},
						{
							text: "9年",
							value: "9"
						},
						{
							text: "10年",
							value: "10"
						},
					]
				},
				pickData2: {
					// 第一列的数据结构
					data1: [{
							text: "计算机/互联网/通讯",
							value: "计算机/互联网/通讯"
						},
						{
							text: "金融/银行/投资/保险",
							value: "金融/银行/投资/保险"
						},
						{
							text: "商业/服务业/个体经营",
							value: "商业/服务业/个体经营"
						},
						{
							text: "文化/广告/传媒",
							value: "文化/广告/传媒"
						},
						{
							text: "娱乐/艺术/表演",
							value: "娱乐/艺术/表演"
						},
						{
							text: "律师/法务",
							value: "律师/法务"
						},
						{
							text: "教育/培训",
							value: "教育/培训"
						},
						{
							text: "医疗/护理/制药",
							value: "医疗/护理/制药"
						},
						{
							text: "公务员/行政/事业单位",
							value: "公务员/行政/事业单位"
						},
						{
							text: "其他",
							value: "其他"
						},
					]
				},
				houseId: this.$route.query.houseId,
				houseinfo: JSON.parse(this.$route.query.houseinfo),
				price: "--",
				discountPrices: 0,
				couponPrices: 0,
				NumDate: 0,
				startDate: '——',
				endDate: "——",
				CouponList: 0,
				refunM: 0,
				refunD: 0,
				isFirstEnter: false, // 是否第一次进入，默认false
				showsex: false,
				myItemssex: [{
						label: '男',
						callback: () => {
							this.sex = "男"
							/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
						}
					},
					{
						label: '女',
						callback: () => {
							this.sex = "女"
						}
					}
				],
				sex: "请选择性别",
				month_price: {
					label: '月付',
					callback: () => {
						this.myItemszfstring = "月付",
							this.pay_type = 1
						/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
					}
				},
				qtr_price: {
					label: '季付',
					callback: () => {
						this.myItemszfstring = "季付"
						this.pay_type = 2
						/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
					}
				},
				half_year_price: {
					label: '半年付',
					callback: () => {
						this.myItemszfstring = "半年付"
						this.pay_type = 4
						/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
					}
				},
				year_price: {
					label: '年付',
					callback: () => {
						this.myItemszfstring = "年付"
						this.pay_type = 3
						/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
					}
				},
				showzf: false,
				myItemszfstring: "请选择支付方式",
				myItemszf: [],

				datac: null,
				today: null
			}
		},
		created() {

			this.setBaseInfo();
			this.datac = new Date();
			this.today = this.datac.getFullYear() + "-" + (this.datac.getMonth() + 1 < 10 ? '0' + (this.datac.getMonth() + 1) : this.datac.getMonth() + 1) + "-" + (this.datac.getDate() < 10 ? '0' + this.datac.getDate() : this.datac.getDate());
			this.datetime4 = this.today;

			if(this.houseinfo.month_price != 0) {
				this.myItemszf.push(this.month_price)
			}
			if(this.houseinfo.qtr_price != 0) {
				this.myItemszf.push(this.qtr_price)
			}
			if(this.houseinfo.half_year_price != 0) {
				this.myItemszf.push(this.half_year_price)
			}
			if(this.houseinfo.year_price != 0) {
				this.myItemszf.push(this.year_price)
			}
		},
		computed: {
			...mapGetters([
				'source',
				'ShortPricesdata',
				'ShortPricesTimedata',
				'houseRent',
				'roomRent',
				'bedRental',
				'baseInfodata',
				'allPrice',
				'allPriceCoupon',
				'userCheckInList',
				'couponId',
			])
		},
		methods: {
			//			提交订单
			submintGetordernew() {
				if(this.contact_name == "") {
					alert("请输入姓名")
					return
				}
				if(this.contact_phone == "") {
					alert("请输入联系电话")
					return
				}
				if(this.contact_phone.length < 11) {
					alert("请输入正确的手机号码")
				}
				if(this.sex == "请选择性别") {
					alert("请选择性别")
					return
				}
				if(this.defaultData2[0].value == "请选择职业") {
					alert("请选择职业")
					return
				}
				if(this.id_card == "") {
					alert("请输入身份证号码")
					return
				}
				if(this.pay_type == 0) {
					alert("请选择支付方式")
					return
				}
				if($(".datetimespan").css("display") != "none") {
					alert("请选择入住时间")
				}
				if(this.defaultData1[0].value == "请选择入住时长") {
					alert("请选择入住时长")
					return
				}
				var ajaxSign = {
					source: this.source, // string 是
					token: this.baseInfodata.token, //string 是
					userId: this.baseInfodata.id.toString(), //string 是
					house_id: this.houseId.toString(), //string 是 房源id
					contact_phone: this.contact_phone, //string 是 联系电话
					contact_name: this.contact_name, //string 是 联系人
					room_id: this.houseinfo.room_id.toString(), //string 是 房源详情页获取到的room_id（ 合租选择房间时room_id会变动）
					sex: this.sex, //string 是 性别
					occupation: this.defaultData2[0].value, //string 是 职业
					id_card: this.id_card, //string 是 身份证
					pay_type: this.pay_type.toString(), //string 是 1 月付2季付3年付4半年付
					house_start_time: this.datetime4, //string 是 2018 - 01 - 01
					year: this.defaultData1[0].value, //string 是 1,2,3...时长多少年
				};

				let ajaxData = api.getAES(ajaxSign);
				api.Getlongordernew(ajaxData)
					.then(res => {
						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
						if(res.sta == 200) {
							this.$router.replace({
								path: "/LoderInfo",
								query: {
									orderId: res.result.orderId,
								}
							})
						}
					})
			},
			callbacktiem() {
				if((new Date(this.datetime4)) < (new Date(this.today))) {
					this.datetime4 = this.today;
					alert("预定时间不能小于今天")
				}
			},
			opdatetime() {
				this.opdate = true
			},
			close() {
				this.show = false
			},
			confirmFn(val) {
				this.show = false
				this.defaultData = [val.select1]
				if(this.pickData == this.pickData1) {
					this.defaultData1 = this.defaultData;
				}
				if(this.pickData == this.pickData2) {
					this.defaultData2 = this.defaultData;
				}
				//				this.defaultData1=this.defaultData;
			},
			toShow1() {
				this.pickData = this.pickData1
				this.show = true;
			},
			toShow2() {
				this.pickData = this.pickData2
				this.show = true;
			},
			...mapActions({
				setBaseInfo: 'setBaseInfo',
				setAllprice: 'setAllprice',
				setAllPriceCoupon: "setAllPriceCoupon",
				setcouponId: 'setcouponId',
				setuserCheckInList: "setuserCheckInList"
			}),

			JSallPrice() {
				//				初始总价格
				let jallPrice = this.allPrice;
				if(jallPrice > 0) {
					//				如果有折扣
					if(this.houseinfo.fullCuts != undefined) {
						for(var i = 0; i < this.houseinfo.fullCuts.length; i++) {
							if(parseInt(this.NumDate) >= parseInt(this.houseinfo.fullCuts[i].days)) {
								//							折扣后的价格
								this.discountPrices = (jallPrice * (1 - parseFloat(this.houseinfo.fullCuts[i].discount) / 10)).toFixed(2);
								jallPrice = parseFloat(this.houseinfo.fullCuts[i].discount) / 10 * jallPrice;
							}
						}
					}
					jallPrice = jallPrice + this.houseinfo.cashPledge + this.houseinfo.cleanFee - this.allPriceCoupon;
					this.couponPrices = this.allPrice - this.discountPrices + this.houseinfo.cleanFee
					if(jallPrice <= 0) {
						jallPrice = 0
					}
					this.price = jallPrice.toFixed(2)
				}
				//				this.setAllprice(jallPrice)
			},
			ShortRulesGO() {
				var that = this;
				that.$router.push({
					path: "/ShortRules",
					query: {
						houseId: that.houseId
					}
				})
			},
			gettimego(times) {
				var date1 = new Date(times * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date1.getFullYear();
				var M = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1);
				var D = date1.getDate();
				return date1
			},

		}
	}
</script>

<style>
	@import url("../assets/css/caldate.css");
	@import url("../assets/css/cldate1.css");
	.opdatetactive {
		opacity: 1 !important;
	}
	
	.hhir-input {
		border: none;
		text-align: right;
	}
	
	.yd-datetime-input {
		opacity: 0;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		text-align: right;
	}
	
	.datetimespan {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	
	.datetimespanactive {
		display: none;
	}
	
	.LongHouseApply .mypicker {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.LongHouseApply .area_btn {
		font-size: .31rem !important;
	}
	
	.LongHouseApply-title {
		background: #EEEEEE;
		width: 100%;
		line-height: .8rem;
		text-align: center;
	}
	
	.LongHouseApply .dateTable td>p {
		font-size: .15rem;
		color: #282828;
	}
	
	.LongHouseApply .dateTable .rz {
		color: #fff !important;
	}
	
	.LongHouseApply .dateTable .rz>p {
		color: #fff !important;
	}
	
	.LongHouseApply {
		width: 100%;
		font-size: .31rem;
		line-height: .31rem;
	}
	
	.LongHouseApply .LongHouseApply-onebox {
		width: 100%;
		background: #fff;
	}
	
	.LongHouseApply .ho-top {
		display: flex;
		padding: .49rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.LongHouseApply .hot-left {
		width: 2.15rem;
		height: 1.42rem;
		overflow: hidden;
	}
	
	.LongHouseApply .hotl-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.LongHouseApply .hotr-title {
		font-size: .31rem;
		line-height: .31rem;
		width: 4.34rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.LongHouseApply .hot-right {
		margin-left: .42rem;
	}
	
	.LongHouseApply .hot-right>p {
		font-size: .25rem;
		line-height: .25rem;
		color: #747474;
		margin-top: .31rem;
	}
	/*入住离开*/
	
	.LongHouseApply .ho-tiemtitle {
		display: flex;
		justify-content: space-between;
		padding: .47rem .24rem;
		box-sizing: border-box;
	}
	
	.LongHouseApply .hot-rz {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.LongHouseApply .hot-ds {
		width: 1.29rem;
		font-size: .27rem;
		text-align: center;
		position: relative;
	}
	
	.LongHouseApply .hot-ds::after {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background: #282828;
		position: absolute;
		bottom: -.05rem;
	}
	
	.LongHouseApply .hot-ds>span {
		color: #e34648;
	}
	
	.LongHouseApply .more {
		display: block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #bcbcbc;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
	}
	/*订单房源信息*/
	
	.LongHouseApply .hh-item {
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: .45rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.LongHouseApply .hhi-left {
		width: 1.3rem;
		display: flex;
		justify-content: space-between;
	}
	
	.LongHouseApply .hhi-right {
		display: flex;
		align-items: center;
	}
	
	.LongHouseApply .hhir-btn {
		display: block;
		width: .35rem;
		height: .35rem;
		text-align: center;
		border: 1px solid #e34648;
		box-sizing: border-box;
		color: #e34648;
		font-size: .35rem;
		line-height: .35rem;
		border-radius: .06rem;
	}
	
	.LongHouseApply .hhir-s {
		margin: 0 .3rem;
	}
	
	.LongHouseApply .hhir-g {
		color: #a4a4a4;
	}
	
	.LongHouseApply .hhi-leftb {
		font-size: .29rem;
		line-height: .42rem;
	}
	/*底部*/
	
	.LongHouseApply .LongHouseApply-flexbtn {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: .42rem;
		background: #fff;
	}
	
	.LongHouseApply .hflr-img {
		width: .42rem;
		height: .56rem;
	}
	
	.LongHouseApply .hf-right {
		width: 50%;
		height: 1.01rem;
		line-height: 1.01rem;
		text-align: center;
		color: #fff;
		background: #e34648;
	}
	
	.LongHouseApply .hf-left {
		width: 50%;
		text-align: center;
		height: 1.01rem;
		line-height: 1.01rem;
	}
	
	.LongHouseApply .hfl-left>p {
		font-size: .35rem;
		color: #E34648;
	}
	
	.LongHouseApply .hfl-left>span {
		display: block;
		font-size: .25rem;
		color: #a4a4a4;
		margin-top: .1rem;
	}
	
	.LongHouseApply #startDate,
	.LongHouseApply #endDate {
		width: initial;
	}
	
	.LongHouseApply #firstSelect {
		font-size: .31rem !important;
	}
	
	.LongHouseApply .labeldate {
		/*width: 1.5rem !important;*/
		font-size: .28rem;
	}
</style>